<template>
    <el-dialog :title="`复制任务${taskName}`" :visible.sync="dialogTableVisible" :show-close="false" :center="true" top="4vh" :before-close="beforeClose">
        <div class="dialogVue">
            <div class="innerVue" ref="msgRef">
                <div class="inpVue">
                    <div class="label">请为复制的新任务创建名称，方便您后续跟踪管理</div>
                    <el-input v-model="$store.state.taskName" placeholder="请输入任务名" style="width: 250px; margin-top: 10px;" :maxlength="12"></el-input>
                </div>
                <!-- 选择日期 -->
                <div class="dataVue margin10">
                    <div class="label">发布时间</div>
                    <el-radio v-model="dateType" :label="1">特定日期</el-radio>
                    <el-radio v-model="dateType" :label="2">周期循环</el-radio>
                    <el-radio v-model="dateType" :label="3">立即发送</el-radio>
                                <!-- 特定日期 -->
                    <template v-if="dateType===1">
                        <div class="flex align_center margin10">
                            <span>选择发布时间：</span>
                            <el-date-picker v-model="datetime" type="datetime" placeholder="选择发送日期时间" :picker-options="disableOptions" @change="dateChange"></el-date-picker>
                        </div>
                    </template>
                                <!-- 周期循环 -->
                    <template v-if="dateType===2">
                        <div class="flex align_center margin10">
                            <span>选择发布周期：</span>
                            <div class="week" :class="{active: selectDays.includes(o)}" v-for="(o, i) in days" :key="i" @click="selectWeekFun(o)">{{ o }}</div>
                        </div>
                        <div class="flex align_center margin10">
                            <span>选择发布时间：</span>
                            <el-time-picker v-model="time" value-format="HH:mm" :picker-options="{ selectableRange: '08:00:00 - 22:00:00' }" placeholder="选择发布时间" @change="timeChange"></el-time-picker>
                        </div>
                    </template>
                    <div class="tip">请注意，您设置的群发时间是任务的开始时间，消息将按队列依次发送，这意味着用户接收消息的时间可能会有所不同，您当前任务：群发100人，整个任务大约需要10分钟完成，预计2024年7月11日10:51开始发送</div>
                </div>
                <div class="messageVue margin10">
                    <div class="label">发布内容</div>
                    <div class="messageItem relative" v-for="(item, index) in msgArray" :key="index" :class="{messageActive: index==msgIndex}">
                        <el-radio v-model="msgArray[index].messageType" :label="1">自定义文本内容</el-radio>
                        <el-radio v-model="msgArray[index].messageType" :label="2">自定义图片内容</el-radio>
                        <el-radio v-model="msgArray[index].messageType" :label="3">自定义视频内容</el-radio>
                        <span class="el-icon-close absolute" style="top: 10px; right: 10px; font-size: 18px; color: #AAA; cursor: pointer;" v-if="index!=0" @click="removeMsgArray(index)"></span>
                        <template v-if="msgArray[index].messageType===1">
                            <div class="flex align_center margin10">
                                <span style=" color: #666; font-size: 12px; padding-right: 10px;">使用AI生成内容</span>
                                <el-switch v-model="msgArray[index].isAi" active-color="#0147fd" inactive-color="#999"></el-switch>
                            </div>
                            <template v-if="msgArray[index].isAi">
                                <textarea v-model="msgArray[index].describetion" placeholder="请大概描述你需要AI生成的内容需求"></textarea>
                                    <div class="flex align_center" style="padding: 10px 0;">
                                        <span style="color: #AAA; font-size: 12px;">AI生成内容预览</span>
                                        <div class="btn">生成</div>
                                    </div>
                                <textarea v-model="msgArray[index].aiMsg" style="margin-top: 0"></textarea>
                            </template>
                            <textarea v-model="msgArray[index].msg" placeholder="请输入自定义文本内容" v-else></textarea>
                        </template>
                        <template v-if="msgArray[index].messageType===2">
                            <div class="flex">
                                <div class="uploadVue flex_center align_center relative">
                                    <span class="el-icon-loading" v-if="msgArray[index].loading"></span>
                                        <template v-else>
                                            <span class="el-icon-plus" style="color: #AAA;"></span>
                                            <span style="color: #AAA; padding-left: 5px;">选择图片</span>
                                            <input ref="clearRef" class="fileBtn" type="file" id="fileupload" accept=".jpg, .png, .jpeg" @change="imgChange($event, index)"/>
                                        </template>
                                </div>
                                <div class="show flex align_center" v-if="msgArray[index].imgName">
                                    <span>{{ msgArray[index].imgName.split('-')[msgArray[index].imgName.split('-').length-1] }}</span>
                                    <span class="el-icon-close" style="padding-left: 5px; font-size: 16px; cursor: pointer;" @click="msgArray[index].imgName=''"></span>
                                </div>
                            </div>
                        </template>
                        <template v-if="msgArray[index].messageType===3">
                            <div class="flex">
                                <div class="uploadVue flex_center align_center relative">
                                    <span class="el-icon-loading" v-if="msgArray[index].loading"></span>
                                    <template v-else>
                                        <span class="el-icon-plus" style="color: #AAA;"></span>
                                        <span style="color: #AAA; padding-left: 5px;">选择视频</span>
                                        <input ref="clearRef" class="fileBtn" type="file" id="fileupload" accept=".mp4" @change="videoChange($event, index)"/>
                                    </template>
                                </div>
                                <div class="show flex align_center" v-if="msgArray[index].videoName">
                                    <span>{{ msgArray[index].videoName.split('-')[msgArray[index].videoName.split('-').length-1] }}</span>
                                    <span class="el-icon-close" style="padding-left: 5px; font-size: 16px; cursor: pointer;" @click="msgArray[index].videoName=''"></span>
                                </div>
                            </div>
                        </template>
                    </div>
                    <div class="messageAdd" @click="addMessage" v-if="msgArray.length<5">再加一条</div>
                </div>
            </div>
            <div class="btnVue flex_between">
                <div></div>
                <div class="flex">
                    <div class="btn" @click="beforeClose">取消</div>
                    <div class="btn" @click="sendFun">发送</div>
                </div> 
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { mapState } from 'vuex';
import { toast } from '@/common/tools';
import { post } from '@/common/request';
export default {
    props: {
        dialogTableVisible: {
            type: Boolean,
            default: false
        },
        taskName: {
            type: String,
            default: ""
        }
    },
    data(){
        return {
            dateType: 1,
            datetime: "",
            disableOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7
                }
            },
            days: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
            selectDays: [],
            time: "",
            msg: "",
            msgArray: [{
                messageType: 1,
                isAi: false,
                msg: "",
                describetion: "",
                aiMsg: "",
                imgName: "",
                videoName: "",
                loading: false,
            }],
            isLoading: false,
            loading: false,
            msgIndex: null
        }
    },
    computed: {
        ...mapState({
            currentWeChat: state=> state.currentWeChat,
        })
    },
    methods: {
        beforeClose(){
            this.msgArray = [{
                messageType: 1,
                isAi: false,
                msg: "",
                describetion: "",
                aiMsg: "",
                imgName: "",
                videoName: "",
                loading: false,
            }]
            this.$emit("beforeClose")
        },

        sendFun(){

        },

        imgChange(e, index){
            console.log(e, index)
            var file = e.target.files[0];
            var formData = new FormData()
            formData.append("file", file)
            this.msgArray[index].loading = true
            this.$forceUpdate()
            post("/front/search/uploadImage", formData).then(res=>{
                if(this.$refs.clearRef.value) this.$refs.clearRef.value = ''; // 清空file文件
                this.msgArray[index].loading = false
                this.$forceUpdate()
                if(res.data.code===0) this.msgArray[index].imgName = res.data.obj 
            })
        },

        videoChange(e, index){
            console.log(e, index)
            var file = e.target.files[0];
            var formData = new FormData()
            formData.append("file", file)
            this.msgArray[index].loading = true
            this.$forceUpdate()
            post("/front/search/uploadVideo", formData).then(res=>{
                if(this.$refs.clearRef.value) this.$refs.clearRef.value = ''; // 清空file文件
                this.msgArray[index].loading = false
                this.$forceUpdate()
                if(res.data.code===0) this.msgArray[index].videoName = res.data.obj
            })
        },
        // 选择周期循环
        selectWeekFun(o){
            if(this.selectDays.includes(o)) {
                this.selectDays = this.selectDays.filter(item=>{
                    return item != o
                })
            }else{
                this.selectDays.push(o)
            }
        },

        // 选择日期时间
        dateChange(e){
            let timestamp = new Date(e).getTime()
            this.datetime = formatTime(timestamp, "YMDHMS")
        },

        // 选择时间
        timeChange(e){
            console.log(e)
            this.time = e
        },

        removeMsgArray(index){
            this.msgArray = this.msgArray.slice(0, index).concat(this.msgArray.slice(index + 1));
        },

        addMessage(){
            this.msgArray.push({
                messageType: 1,
                isAi: false,
                msg: "",
                describetion: "",
                aiMsg: "",
                imgName: "",
                videoName: "",
                loading: false,
            })
            // 滑动到聊天最底部
            this.$nextTick(()=>{
                let dom = this.$refs.msgRef
                console.log(dom)
                dom.scrollTo({ top: dom.scrollHeight, behavior: 'smooth' });
            })
        },
    }
}
</script>

<style lang="less" scoped>
:deep(.el-dialog) {
    width: 800px;
    height: 90vh;
}
:deep(.el-dialog__header) {
    padding: 20px 0 5px;
}
:deep(.el-dialog__body) {
    padding: 0;
}
.dialogVue {
    width: 100%;
    height: 90vh;
    padding: 0 15px;
    .innerVue {
        width: 100%;
        height: calc(90vh - 99px);
        overflow-y: scroll;
        .inpVue {
            width: 100%;
            margin-top: 20px;
            .label {
                font-size: 12px;
                line-height: 1.4;
                span {
                    color: #0147fd;
                }
            }
        }
        .dataVue {
            width: 100%;
            border: 1px solid #DCDFE6;
            border-radius: 5px;
            padding: 10px;
            .label {
                color: #111;
                font-weight: 600;
                font-size: 12px;
                padding-bottom: 15px;
            }            
            .week {
                width: 80px;
                height: 40px;
                border: #DCDFE6  1px solid;
                margin-right: 10px;
                border-radius: 4px;
                line-height: 40px;
                text-align: center;
                color: #999;
                cursor: pointer;
            }

            .active {
                background: #0147fd;
                color: #fff;
            }

            .tip {
                color: #AAA;
                font-size: 12px;
                padding-top: 10px;
                line-height: 1.4;
            }
        }
    }
    .innerVue::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .messageVue {
        width: 100%;
        border: 1px solid #f5f5f5;
        border-radius: 5px;
        padding: 10px;
        .messageAdd {
            width: 100%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: #f5f5f5;
            margin-top: 10px;
            color: #AAA;
            cursor: pointer;
            font-size: 12px;
        }
        .messageItem {
            width: 100%;
            border: 1px solid #f5f5f5;
            border-radius: 5px;
            padding: 10px;
            margin-top: 10px;
            .label {
                color: #111;
                font-weight: 600;
                font-size: 12px;
                padding-bottom: 15px;
            }
            .btn {
                width: 60px;
                height: 32px;
                background: #0147fd;
                border-radius: 4px;
                margin-left: 6px;
                line-height: 32px;
                text-align: center;
                color: #fff;
                font-size: 12px;
                cursor: pointer;
            }
            .uploadVue {
                width: 120px;
                height: 38px;
                background: #f5f5f5;
                border-radius: 5px;
                margin-top: 10px;
                cursor: pointer;
                .fileBtn {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    opacity: 0;
                    cursor: pointer;
                    z-index: 98;
                    border: none;
                    outline: none;
                }
            }
            .show {
                padding: 0 10px;
                background: #f5f5f5;
                border-radius: 5px;
                margin-top: 10px;
                margin-left: 10px;
                span {
                    color: #AAA;
                }
            }
            textarea {
                width: 100%;
                height: 60px;
                border: #f5f5f5 1px solid;
                display: block;
                box-sizing: border-box;
                resize: none;
                border-radius: 4px;
                margin-top: 10px;
                line-height: 1.4;
                font-family: PingFangSC, PingFang SC;
                padding: 10px;
                font-size: 13px;
            }        
            textarea::-webkit-scrollbar {
                width: 0;
                height: 0;
            }        
            ::-webkit-input-placeholder { /* WebKit browsers */
                color: #AAA;
                font-size: 13px;
                font-family: PingFangSC, PingFang SC;
            }
            :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                color: #AAA;
                font-size: 13px;
                font-family: PingFangSC, PingFang SC;
            }
            ::-moz-placeholder { /* Mozilla Firefox 19+ */
                color: #AAA;
                font-size: 13px;
                font-family: PingFangSC, PingFang SC;
            }
            :-ms-input-placeholder { /* Internet Explorer 10+ */
                color: #AAA;
                font-size: 13px;
                font-family: PingFangSC, PingFang SC;
            }
        }
        .messageActive {
            border: 1px solid #f4ea2a;
        }          
    }

    .btnVue {
        width: 100%;
        height: 50px;
        .btn {
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 5px;
            cursor: pointer;
            margin-left: 10px;
        }
        .btn:nth-child(1) {
            background: #f5f5f5;
        }
        .btn:nth-child(2) {
            background: #0147fd;
            color: #fff;
        }
    }
}
</style>